<style>
  section {
    background: #f7f7f7;
    border-radius: 3px;
    text-align: center;
    margin: 1em;
    position: relative !important;
    padding-bottom: 10px;
  }

  .label {
    position: absolute;
    bottom: 5px;
    left: 7px;
    color: #ccc;
    font-size: 14px;
  }

  .custom {
    background-color: #ae0001;
    color: #eeba30;
  }

  .custom:hover, .custom.md-button-focus {
    background-color: #740001;
    color: #d3a625;
  }
</style>

<h1>Button demo</h1>

<p>
  You just clicked: <span>{{previousClick}}</span>
</p>

<section>
  <form (^submit)="submit('form submit')">
    <button md-button>SUBMIT</button>
    <button>Native button</button>
  </form>

  <span class="label">form submit</span>
</section>

<section>
  <span class="label">Regular button</span>

  <button md-button (^click)="click('button')">BUTTON</button>

  <button md-button class="md-primary" (^click)="click('primary')">PRIMARY</button>
  <button md-button disabled="disabled" (^click)="click('disabled')">DISABLED</button>
  <button md-button class="md-accent" (^click)="click('accent')">ACCENT</button>
  <button md-button class="md-warn" (^click)="click('warn')">WARN</button>
  <button md-button class="custom" (^click)="click('custom')">CUSTOM</button>
</section>

<section>
  <span class="label">Raised button</span>
  <button md-raised-button (^click)="click('raised')">BUTTON</button>
  <button md-raised-button class="md-primary" (^click)="click('raised primary')">PRIMARY</button>
  <button md-raised-button disabled="disabled" (^click)="click('raised disabled')">DISABLED</button>
  <button md-raised-button class="md-accent" (^click)="click('raised accent')">ACCENT</button>
  <button md-raised-button class="md-warn" (^click)="click('raised warn')">WARN</button>
  <button md-raised-button class="custom" (^click)="click('custom raised')">CUSTOM</button>
</section>
<section>
  <span class="label">Fab button</span>
  <button md-fab (^click)="click('fab')">BTN</button>
  <button md-fab class="md-primary" (^click)="click('fab primary')">PRMY</button>
  <button md-fab disabled="disabled" (^click)="click('fab disabled')">DIS</button>
  <button md-fab class="md-accent" (^click)="click('fab accent')">ACC</button>
  <button md-fab class="md-warn" (^click)="click('fab warn')">WRN</button>
  <button md-fab class="custom" (^click)="click('custom fab')">CSTM</button>
</section>
<section>
  <span class="label">Anchor / hyperlink</span>
  <a md-button href="http://google.com" target="_blank">HREF</a>
  <a md-button href="http://google.com" disabled>DISABLED HREF</a>
  <a md-raised-button target="_blank" href="http://google.com">RAISED HREF</a>
</section>

<section dir="rtl">
  <span class="label" dir="ltr">Right-to-left</span>
  <button md-button (^click)="click('Hebrew button')">לחצן</button>
  <button md-raised-button (^click)="click('Hebrew raised button')">העלה</button>
  <a md-button href="http://translate.google.com">עוגן</a>
</section>

